<!DOCTYPE html>
<html>
<head>
    <title>Static Force Analysis Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: white;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="900" height="450"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        // --- Helper Functions ---

        // Draws hatching for the ground
        function drawHatching(x1, y1, x2, y2, spacing = 8, angle = Math.PI / 4, length = 10) {
            ctx.save();
            ctx.strokeStyle = 'black';
            ctx.lineWidth = 1;
            
            const lineAngle = Math.atan2(y2 - y1, x2 - x1);
            const hatchAngle = lineAngle - angle; // Adjust angle for downward hatches
            
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.stroke();

            const totalLength = Math.sqrt((x2-x1)**2 + (y2-y1)**2);
            const numHatches = Math.floor(totalLength / spacing);

            for (let i = 0; i <= numHatches; i++) {
                const currentX = x1 + (x2 - x1) * (i / numHatches);
                const currentY = y1 + (y2 - y1) * (i / numHatches);
                ctx.beginPath();
                ctx.moveTo(currentX, currentY);
                ctx.lineTo(currentX + length * Math.cos(hatchAngle), currentY + length * Math.sin(hatchAngle));
                ctx.stroke();
            }
            ctx.restore();
        }

        // Draws a pin/hinge support
        function drawPinSupport(x, y, size = 30) {
            const h = size;
            const w = size * 1.3;
            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.lineTo(x - w / 2, y + h);
            ctx.lineTo(x + w / 2, y + h);
            ctx.closePath();
            ctx.stroke();

            drawHatching(x - w/2 - 5, y + h, x + w/2 + 5, y + h, 8, Math.PI / 4);

            // Draw pin circle
            ctx.beginPath();
            ctx.arc(x, y, 5, 0, 2 * Math.PI);
            ctx.fillStyle = 'white';
            ctx.fill();
            ctx.stroke();
        }

        // Draws a roller support on a horizontal surface
        function drawRollerSupport(x, y, size = 30) {
            const h = size;
            const w = size * 1.3;
            const rollerRadius = 4;
            const supportY = y + h;
            const rollerY = supportY + rollerRadius;

            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.lineTo(x - w / 2, supportY);
            ctx.lineTo(x + w / 2, supportY);
            ctx.closePath();
            ctx.stroke();
            
            drawHatching(x - w/2 - 10, rollerY + rollerRadius, x + w/2 + 10, rollerY + rollerRadius, 8, Math.PI / 4);
            
            // Draw a line under the support for rollers to rest on.
            ctx.beginPath();
            ctx.moveTo(x - w / 2 - 5, rollerY + rollerRadius);
            ctx.lineTo(x + w / 2 + 5, rollerY + rollerRadius);
            ctx.stroke();

            // Rollers
            ctx.beginPath();
            ctx.arc(x - w / 4, rollerY, rollerRadius, 0, 2 * Math.PI);
            ctx.stroke();
            ctx.beginPath();
            ctx.arc(x + w / 4, rollerY, rollerRadius, 0, 2 * Math.PI);
            ctx.stroke();
            
            // Draw pin circle
            ctx.beginPath();
            ctx.arc(x, y, 5, 0, 2 * Math.PI);
            ctx.fillStyle = 'white';
            ctx.fill();
            ctx.stroke();
        }

        // Draws a line with a solid arrowhead
        function drawArrow(x1, y1, x2, y2, size = 10) {
            const angle = Math.atan2(y2 - y1, x2 - x1);
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.stroke();

            ctx.save();
            ctx.translate(x2, y2);
            ctx.rotate(angle);
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.lineTo(-size, -size / 2);
            ctx.lineTo(-size, size / 2);
            ctx.closePath();
            ctx.fill();
            ctx.restore();
        }
        
        // Draws an open arrowhead for dimension lines
        function drawDimArrow(x1, y1, x2, y2, size = 8) {
            const angle = Math.atan2(y2 - y1, x2 - x1);
            ctx.save();
            ctx.translate(x2, y2);
            ctx.rotate(angle);
            ctx.beginPath();
            ctx.moveTo(-size, -size / 2.5);
            ctx.lineTo(0, 0);
            ctx.lineTo(-size, size / 2.5);
            ctx.stroke();
            ctx.restore();
        }

        function drawDimensionLine(x1, y, x2, text) {
            ctx.save();
            ctx.lineWidth = 1;
            const tickHeight = 10;
            
            // Vertical projection lines
            ctx.beginPath();
            ctx.moveTo(x1, y - tickHeight);
            ctx.lineTo(x1, y + tickHeight/2);
            ctx.moveTo(x2, y - tickHeight);
            ctx.lineTo(x2, y + tickHeight/2);
            ctx.stroke();
            
            // Horizontal line
            ctx.beginPath();
            ctx.moveTo(x1, y);
            ctx.lineTo(x2, y);
            ctx.stroke();

            // Arrowheads
            drawDimArrow(x2, y, x1, y);
            drawDimArrow(x1, y, x2, y);

            // Text
            const midX = (x1 + x2) / 2;
            const textMetrics = ctx.measureText(text);
            ctx.clearRect(midX - textMetrics.width / 2, y - 10, textMetrics.width, 12);
            
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText(text, midX, y-2);
            ctx.restore();
        }
        
        function drawAngleArc(x, y, startAngle, endAngle, radius, text, clockwise=false) {
             ctx.save();
             ctx.lineWidth = 1;
             ctx.beginPath();
             ctx.arc(x, y, radius, startAngle, endAngle, clockwise);
             ctx.stroke();
             
             // Arrowhead on arc
             const arrowSize = 6;
             const arrowAngle = clockwise ? startAngle : endAngle;
             const tangent = arrowAngle + (clockwise ? -Math.PI/2 : Math.PI/2);
             const ax = x + radius * Math.cos(arrowAngle);
             const ay = y + radius * Math.sin(arrowAngle);
             drawArrow(ax + arrowSize * Math.cos(tangent), ay + arrowSize * Math.sin(tangent), ax, ay, arrowSize);
             
             let midAngle = (startAngle + endAngle) / 2;
             if (clockwise && endAngle < startAngle) midAngle = (startAngle + endAngle + 2 * Math.PI) / 2;
             if (!clockwise && endAngle < startAngle) midAngle = (startAngle + endAngle + 2 * Math.PI) / 2;


             const textX = x + (radius + 12) * Math.cos(midAngle);
             const textY = y + (radius + 12) * Math.sin(midAngle);
             
             ctx.textAlign = 'center';
             ctx.textBaseline = 'middle';
             ctx.fillText(text, textX, textY);
             ctx.restore();
        }

        // --- Main Drawing ---
        
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.font = 'bold 20px Times New Roman';
        
        // --- Diagram (a) ---
        const x_a = 75;
        const y_beam = 150;
        const beam_len = 300;
        const beam_h = 8;
        
        // Draw beam
        ctx.beginPath();
        ctx.rect(x_a, y_beam - beam_h/2, beam_len, beam_h);
        ctx.fill();
        
        // Labels A and B
        ctx.font = 'italic bold 24px Times New Roman';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('A', x_a, y_beam - 15);
        ctx.fillText('B', x_a + beam_len, y_beam - 15);
        ctx.font = 'bold 20px Times New Roman';

        // Supports
        drawPinSupport(x_a, y_beam);
        drawRollerSupport(x_a + beam_len, y_beam);

        // Force P
        const x_p_a = x_a + beam_len / 2;
        const force_len = 70;
        const force_angle_rad = (225) * Math.PI / 180; // 45 deg left from vertical
        const x_start_p_a = x_p_a - force_len * Math.cos(force_angle_rad);
        const y_start_p_a = y_beam - force_len * Math.sin(force_angle_rad);
        
        ctx.font = 'italic bold 24px Times New Roman';
        ctx.fillText('P', x_start_p_a - 15, y_start_p_a);
        ctx.font = 'bold 20px Times New Roman';
        drawArrow(x_start_p_a, y_start_p_a, x_p_a, y_beam);
        
        // Force Angle
        ctx.save();
        ctx.setLineDash([3, 3]);
        ctx.lineWidth = 1;
        const vert_ref_len = 50;
        drawArrow(x_p_a, y_beam - vert_ref_len, x_p_a, y_beam, 8);
        ctx.restore();
        
        drawAngleArc(x_p_a, y_beam, force_angle_rad, 270 * Math.PI/180, 30, '45°');

        // Dimensions
        const y_dim = y_beam + 150;
        drawDimensionLine(x_a, y_dim, x_p_a, '2 m');
        drawDimensionLine(x_p_a, y_dim, x_a + beam_len, '2 m');

        // Label (a)
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.fillText('(a)', x_a + beam_len / 2, y_dim + 40);


        // --- Diagram (b) ---
        const x_b = 500;
        
        // Draw beam
        ctx.beginPath();
        ctx.rect(x_b, y_beam - beam_h/2, beam_len, beam_h);
        ctx.fill();

        // Labels A and B
        ctx.font = 'italic bold 24px Times New Roman';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('A', x_b, y_beam - 15);
        ctx.fillText('B', x_b + beam_len, y_beam - 15);
        ctx.font = 'bold 20px Times New Roman';
        
        // Supports
        drawPinSupport(x_b, y_beam);
        
        // Inclined Roller Support at B
        const x_support_b = x_b + beam_len;
        const incline_angle = -45 * Math.PI / 180; // Down and right
        
        ctx.save();
        ctx.translate(x_support_b, y_beam);
        
        // Draw pin circle first, so it's not rotated
        ctx.beginPath();
        ctx.arc(0, 0, 5, 0, 2 * Math.PI);
        ctx.fillStyle = 'white';
        ctx.fill();
        ctx.stroke();
        
        ctx.rotate(incline_angle);
        
        // Draw the support relative to the rotated canvas
        const size_b = 30;
        const h_b = size_b;
        const w_b = size_b * 1.3;
        const roller_r_b = 4;
        const support_y_b = h_b;
        const roller_y_b = support_y_b + roller_r_b;

        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(-w_b / 2, support_y_b);
        ctx.lineTo(w_b / 2, support_y_b);
        ctx.closePath();
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(-w_b/2-5, roller_y_b + roller_r_b);
        ctx.lineTo(w_b/2+5, roller_y_b + roller_r_b);
        ctx.stroke();

        drawHatching(-w_b/2-10, roller_y_b + roller_r_b, w_b/2+10, roller_y_b + roller_r_b, 8, Math.PI / 4);

        ctx.beginPath();
        ctx.arc(-w_b/4, roller_y_b, roller_r_b, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(w_b/4, roller_y_b, roller_r_b, 0, 2 * Math.PI);
        ctx.stroke();
        
        ctx.restore();
        
        // Incline angle indicator
        const angle_ind_x = x_support_b + 40;
        const angle_ind_y = y_beam + 60;
        ctx.save();
        ctx.setLineDash([3, 3]);
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(angle_ind_x, angle_ind_y);
        ctx.lineTo(angle_ind_x + 60, angle_ind_y); // Horizontal
        ctx.stroke();
        ctx.restore();
        
        drawAngleArc(angle_ind_x, angle_ind_y, 0, incline_angle, 35, '45°', true);

        // Force P
        const x_p_b = x_b + beam_len / 2;
        const x_start_p_b = x_p_b - force_len * Math.cos(force_angle_rad);
        const y_start_p_b = y_beam - force_len * Math.sin(force_angle_rad);
        
        ctx.font = 'italic bold 24px Times New Roman';
        ctx.fillText('P', x_start_p_b - 15, y_start_p_b);
        ctx.font = 'bold 20px Times New Roman';
        drawArrow(x_start_p_b, y_start_p_b, x_p_b, y_beam);

        // Force Angle
        ctx.save();
        ctx.setLineDash([3, 3]);
        ctx.lineWidth = 1;
        drawArrow(x_p_b, y_beam - vert_ref_len, x_p_b, y_beam, 8);
        ctx.restore();
        
        drawAngleArc(x_p_b, y_beam, force_angle_rad, 270 * Math.PI / 180, 30, '45°');
        
        // Dimensions
        drawDimensionLine(x_b, y_dim, x_p_b, '2 m');
        drawDimensionLine(x_p_b, y_dim, x_b + beam_len, '2 m');

        // Label (b)
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.fillText('(b)', x_b + beam_len / 2, y_dim + 40);

    </script>
</body>
</html>